<template>
	<view class="container">
		<unicloud-db
			ref="udb"
			v-slot:default="{ data, pagination, loading, hasMore, error }"
			collection="opendb-mall-categories"
			field="parent_id,name,icon,sort,description,is_hot_show,is_index_show"
			:getone="false"
			:action="action"
			:where="where"
			@load="onqueryload"
			@error="onqueryerror"
		>
			<view v-if="error">{{ error.message }}</view>
			<view v-else-if="data">
				<uni-list>
					<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
						<view slot="body"><image :src="item.icon" mode="widthFix"></image></view>
					</uni-list-item>
				</uni-list>
			</view>
			<uni-load-more :status="loading ? 'loading' : hasMore ? 'more' : 'noMore'"></uni-load-more>
		</unicloud-db>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadMore: {
				contentdown: '',
				contentrefresh: '',
				contentnomore: ''
			},
			pages: {
				page: 1,
				size: 10
			},
			dataList:[],
			options: {}, // 插槽不能访问外面的数据，通过此参数传递, 不支持传递函数
			action: '',
			where: { is_index_show: true } // 类型为对象或字符串
		};
	},
	onShow() {
		this.$nextTick(() => {
			this.$refs.udb.loadData(
				{
					clear: true //可选参数，是否清空数据
				},
				() => {
					uni.stopPullDownRefresh();
				}
			);
		});
	},
	onPullDownRefresh() {
		//下拉刷新
		this.$refs.udb.loadData(
			{
				clear: true //可选参数，是否清空数据
			},
			() => {
				uni.stopPullDownRefresh();
			}
		);
	},
	onReachBottom() {
		//滚动到底翻页
		console.log('触底触发');
		this.$refs.udb.loadMore();
	},

	methods: {
		async onqueryload() {
			uni.showLoading({
				title: '处理中...'
			});
			return await uniCloud
				.callFunction({
					name: 'get'
				})
				.then(res => {
					uni.hideLoading();
					return res.result.data;
				})
				.catch(err => {
					uni.hideLoading();
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					});
					console.error(err);
				});
		},
		handleItemClick(id) {
			uni.navigateTo({
				url: '/pages/opendb-mall-categories/detail?id=' + id
			});
		},
		fabClick() {
			// 打开新增页面
			uni.navigateTo({
				url: './add',
				events: {
					// 监听新增数据成功后, 刷新当前页面数据
					refreshData: () => {
						this.$refs.udb.loadData({
							clear: true
						});
					}
				}
			});
		}
	}
};
</script>

<style></style>
